<template>
  <div>
    <svg-icon icon-class="fresh" :class="{ reloading: isReload }" @click="handleReload" />
  </div>
</template>

<script>
export default {
  name: 'Fresh',
  inject: ['reload'],
  data() {
    return {
      isReload: false
    }
  },
  methods: {
    handleReload() {
      this.isReload = true
      setTimeout(() => {
        this.reload()
        this.isReload = false
      }, 300)
    }
  }
}
</script>

<style scoped>
.fresh-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
}
.reloading {
  transform: rotate(360deg);
  transition: all 0.3s;
}
</style>
